<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
</head>
<body>
<input type="hidden" id="aid" th:value="${aid}">
<form ></form>
<div class="layui-form">
    <div class="layui-form-item timo-detail-page">
        <label class="layui-form-label" style="margin-left: -48px;">总数:<span id="bu"
                                                                             th:text="${#lists.size(list)}"></span></label>
        <label class="layui-form-label">时间选择</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="startTime" readonly="readonly">
        </div>
        <label class="layui-form-label" style="margin-left: -32px;">手机授权</label>
        <div class="layui-input-inline">
            <select name="auth" id="auth" lay-filter="auth">
                <option value="0">全部</option>
                <option value="1">已授权</option>
            </select>
        </div>
        <!--<button class="layui-btn search_btn" id="search"><i class="layui-icon">&#xe615;</i>查询</button>-->
        <a class="layui-btn excel_btn" id="search"><i class="layui-icon">&#xe615;</i>查询</a>
    </div>
</div>
<div class="timo-detail-page" id="mains">
    <th:block th:if="${not #lists.isEmpty(list)}">
        <table class="layui-table timo-detail-table">
            <thead>
            <tr>
                <td width="100px">昵称
                </th>
                <td width="100px">头像
                </th>
                <td width="100px">手机
                </th>
                <td width="100px">渠道
                </th>
                <td width="100px">时间
                </th>
            </tr>
            </thead>
            <tbody>
            <th:block th:each="item:${list}">
                <tr>
                    <td th:text="${item.nickName}"></td>
                    <td><img th:src="${item.avatar}"></td>
                    <td th:text="${item.mobile}"></td>
                    <td th:text="${item.sources}"></td>
                    <td th:text="${#dates.format(item.createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
                </tr>
            </th:block>
            </tbody>
        </table>
    </th:block>
    <th:block th:if="${#lists.isEmpty(list)}">
        <div>暂无数据!</div>
    </th:block>
</div>
<script th:replace="/common/template :: script"></script>
<script type="text/javascript" th:inline="javascript">
    layui.use(['element', 'laydate', 'form'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var laydate = layui.laydate;
        form.render();
        var layers = layui.layer;
        var auth = 0;
        form.on('select(auth)', function (data) {
            auth = data.value;
            console.log(auth);
        })
        $("#search").on("click", function () {
            var startTime = $("#startTime").val();
            var aid = $("#aid").val();
            $.ajax({
                url: "/mains/share/moreDetail?id=" + aid + "&startTime=" + startTime+"&auth="+auth,
                success: function (end) {
                    console.log(end);
                    var ap = '<table class="layui-table timo-detail-table">\n' +
                        '<thead>\n' +
                        '<tr>\n' +
                        '<td width="100px">昵称</th>' +
                        '<td width="100px">头像</th>' +
                        '<td width="100px">手机</th>' +
                        '<td width="100px">渠道</th>' +
                        '<td width="100px">时间</th>' +
                        '</tr>' +
                        '</thead>' +
                        '<tbody>';

                    var len = end.length;
                    $("#bu").text(len);
                    $("#mains").empty();
                    if (len > 0) {
                        for (var i = 0; i < len; i++) {
                            ap += '<tr>';
                            if (end[i].nickName == null || end[i].nickName == null) {
                                ap += '<td></td>';
                            } else {
                                ap += '<td>' + end[i].nickName + '</td>';
                            }
                            if (end[i].avatar == null || end[i].avatar == null) {
                                ap += '<td></td>';
                            } else {
                                ap += '<td><img src="' + end[i].avatar + '"/></td>';
                            }
                            if (end[i].mobile == null || end[i].mobile == null) {
                                ap += '<td></td>';
                            } else {
                                ap += '<td>' + end[i].mobile + '</td>';
                            }
                            ap += '<td>' + end[i].sources + '</td>';
                            ap += '<td>' + end[i].times + '</td>';
                            ap += '</tr>';
                        }
                        ap += '</tbody></table>';
                        $("#mains").append(ap);
                    } else {
                        ap += '<tr>';
                        ap += '<td colspan="5" style="text-align: center">暂无数据</td>';
                        ap += '</tr>';
                        ap += '</tbody></table>';
                        $("#mains").append(ap);
                        layers.msg('嘿嘿,没有找到你想要的数据!', {icon: 6});
                    }
                }
            });
        });
        laydate.render({
            elem: '#startTime' //指定元素
            , type: 'date'
            , format: 'yyyy-MM-dd' //可任意组合
            , max: 1
        });
    })
</script>
</body>
</html>
